<template>
    <el-dialog
    center
    :close-on-click-modal="false"
    v-model="dialogFormVisible"
    :title=" formData.action == 'edit' ? t(`module.table.EditDeviceForm`) : t(`module.table.AddDeviceForm`) "
  >
    <el-form :model="formData" label-width="120px" label-position="left">
      <el-form-item
        class="is-required"
        :label="t(`module.table.Project`)"
        :label-width="formLabelWidth"
      >
        <el-tree-select
          :placeholder="t(`module.table.DefaultSelectTopLevel`)"
          v-model="formData.organization_id"
          :data="organizationList"
          :render-after-expand="false"
          check-strictly
        />
      </el-form-item>
      <el-form-item
        class="is-required"
        :label="t(`module.table.Area`)"
        :label-width="formLabelWidth"
      >
        <el-tree-select
          :placeholder="t(`module.table.DefaultSelectSubLevel`)"
          v-model="formData.area_id"
          :data="areaList"
          :render-after-expand="false"
          check-strictly
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.Zone`)"
        :label-width="formLabelWidth"
      >
        <el-tree-select
          :placeholder="t(`module.table.DefaultSelectZone`)"
          v-model="formData.zone"
          :data="zoneList"
          :render-after-expand="false"
          check-strictly
        />
      </el-form-item>
      <el-form-item class="is-required" :label="t(`module.table.Sn`)" :label-width="formLabelWidth">
        <el-input
          :placeholder="t(`module.table.DefaultInputSn`)"
          v-model="formData.sn"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
         class="is-required"
        :label="t(`module.table.Nickname`)"
        :label-width="formLabelWidth"
      >
        <el-input
          :placeholder="t(`module.table.DefaultInputNickname`)"
          v-model="formData.name"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.Room`)"
        :label-width="formLabelWidth"
      >
        <el-input
          :placeholder="t(`module.table.DefaultInputRoom`)"
          v-model="formData.room_no"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.ActiveTime`)"
        :label-width="formLabelWidth"
      >
        <el-date-picker
          v-model="formData.active_at"
          :editable=false
          type="date"
          placeholder="Pick a day"
          size="large"
          value-format="YYYY-MM-DD 00:00:00"
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.ExpireTime`)"
        :label-width="formLabelWidth"
      >
        <el-date-picker
          v-model="formData.expired_at"
          :editable=false
          type="date"
          placeholder="Pick a day"
          size="large"
          value-format="YYYY-MM-DD 00:00:00"
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.Fee`)"
        :label-width="formLabelWidth"
      >
        <el-input
          :placeholder="t(`module.table.DefaultInputFee`)"
          v-model="formData.fee"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.ContactPerson`)"
        :label-width="formLabelWidth"
      >
        <el-input
          :placeholder="t(`module.table.DefaultInputContactPerson`)"
          v-model="formData.emergency_contact_name"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.ContactTel`)"
        :label-width="formLabelWidth"
      >
        <el-input
          :placeholder="t(`module.table.DefaultInputContactTel`)"
          v-model="formData.emergency_contact_mobile"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.Remark`)"
        :label-width="formLabelWidth"
      >
        <el-input
          :placeholder="t(`module.table.DefaultInputDeviceRemark`)"
          type="textarea"
          v-model="formData.remark"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{ t(`module.table.Cancel`) }}</el-button>
        <el-button type="primary" @click="submit">{{
          t(`module.table.Confirm`)
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { useI18n } from "vue-i18n";
import { reactive, toRefs } from "vue";
import API from "api";
import { ElMessage } from "element-plus";


export default {
  name: 'EditEquipmentDetailDialog',
  props: ['dialogFormVisible', 'formData', 'organizationList','areaList','zoneList'],
  setup(props, context) {
    const { t } = useI18n();
    let pageData = reactive({
      formData: {}
    })
    pageData.formData = props.formData

    // 取消事件
    const cancel = () => {
      context.emit('cancel')
    }

    // 提交事件
    const submit = () => {
      pageData.formData.contact_id = parseInt(pageData.formData.contact_id);
      if (pageData.formData.sn == "") {
        ElMessage.error("please input sn");
        return;
      }
      if (pageData.formData.expired_at == "") {
        ElMessage.error("please input expire date");
        return;
      }
      if (pageData.formData.active_at == "") {
        ElMessage.error("please input active date");
        return;
      }
      if (pageData.formData.name == "") {
        ElMessage.error("please input device namee");
        return;
      }
      API.handleDevice(pageData.formData).then((res) => {
        if (res.code == 0) {
          ElMessage({
            message: "success",
            type: "success",
            duration: 3000,
          });
          context.emit('submitDetail')
        } else {
          ElMessage.error(res.data);
        }
      });
    };


    return {
      t,
      cancel,
      submit,
      ...toRefs(pageData)
    }
  }
}
</script>